<template>
  <div style="padding: 10px;">
    <el-steps :space="350" :active="0" finish-status="success" center>
      <el-step title="订单创建"></el-step>
      <el-step title="订单付款"></el-step>
    </el-steps>
    <!-- confirm order -->
    <div class="box">
      <h3>预订清单</h3>
      <el-table border :data="bookItemList" class="box-body">
        <el-table-column prop="itemName" label="产品"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="timeSlot" label="时段"></el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <span>￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="数量"></el-table-column>
        <el-table-column label="总价">
          <template slot-scope="scope">
            <span>￥{{ scope.row.total }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  
    <div class="box">
      <h3>联系人信息</h3>
      <div v-if="top3Contacts.length > 0" class="box-body">
        <span class="h4">常用联系人: </span>
        <el-tag v-for="contact in top3Contacts" :key="contact" type="gray" @click.native="chooseUsedContact(contact)">
          {{contact.name}}
        </el-tag>
      </div>
      <el-form inline label-width="0px" :model="contact" :rules="contactRules" ref="contactForm" class="box-body">
        <el-form-item prop="name">
          <el-input v-model="contact.name" placeholder="联系人姓名 *"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model="contact.phone" placeholder="联系人手机 *"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="contact.email" placeholder="联系人邮箱 *"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="contact.remark" :maxlength="32" placeholder="其他备注信息(选填)"></el-input>
        </el-form-item>
      </el-form>
    </div>
  
    <div class="box">
      <h3>渠道信息</h3>
      <el-form inline inline label-width="0px" :model="channelOrder" class="box-body">
        <el-form-item>
          <el-input v-model="channelOrder.orderNumber" placeholder="渠道订单号(选填)"></el-input>
        </el-form-item>
      </el-form>
    </div>
  
    <div class="btn-section">
      <div class="desc">
        <span class="h3">订单总额：</span>
        <span class="total">￥{{this.bookItem.price * this.bookItem.amount}}</span>
      </div>
      <el-button type="primary" size="large" @click="submitOrder()">提交付款</el-button>
      <!--<div class="h6">请确认信息无误，该产品不可退款</div>-->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Orders, OrderContact } from '@/store/api'
import * as types from '@/store/mutation-types'

export default {
  computed: {
    bookItemList() {
      return [{
        itemName: this.bookItem.item.name,
        date: this.bookItem.date,
        amount: this.bookItem.amount,
        timeSlot: this.bookItem.timeSlot.label,
        price: this.bookItem.price,
        total: this.bookItem.price * this.bookItem.amount
      }]
    },
    ...mapState({
      bookItem: state => state.order.bookItem
    })
  },
  created() {
    // load top3 used contacts
    OrderContact.getTop3().then((data) => {
      this.top3Contacts = data
    })
  },
  data() {
    return {
      step: 0,
      order: {},
      channelOrder: {},
      contact: {
        name: ''
      },
      top3Contacts: [],
      contactRules: {
        name: [
          { required: true, message: '请填写联系人姓名', trigger: 'blur' },
          { max: 20, message: '长度不可超过20', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写联系人电话', trigger: 'blur' },
          { min: 7, max: 16, message: '请填写正确的移动电话或固话', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请填写联系人邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱地址有误', trigger: 'blur' },
          { max: 32, message: '长度不可超过32', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    chooseUsedContact(used) {
      const remark = this.contact.remark
      this.contact = Object.assign(this.contact, used)
      this.contact.remark = remark
    },
    submitOrder() {
      this.$refs['contactForm'].validate((valid) => {
        if (valid) {
          let data = {}
          data.contact = this.contact
          data.bookItem = {
            itemId: this.bookItem.itemId,
            date: this.bookItem.date,
            amount: this.bookItem.amount,
            price: this.bookItem.price
          }
          data.bookForm = {
            timeSlotCode: this.bookItem.timeSlot.code,
            timeSlotLabel: this.bookItem.timeSlot.label
          }
          data.channelOrder = this.channelOrder
          Orders.createOrder(data).then((data) => {
            this.$store.dispatch(types.ORDER_CREATED).then(() => {
              this.$router.push('/order/pay/' + data.orderNumber)
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 0px;
}

.el-tag {
  margin-right: 6px;
  border-radius: 2px;
  padding: 2px 5px;
  height: 30px;
  line-height: 26px;
  cursor: pointer;
  &:hover {
    background-color: #324057;
    color: #FFF;
  }
}

.btn-section {
  margin-top: 16px;
  padding: 16px 24px 16px 16px;
  border-top: 1px solid #D3DCE6;
  text-align: right;
  .desc {
    margin-bottom: 12px;
    .total {
      font-size: 24px;
      color: #FF4949;
      font-weight: 400;
    }
  }

  button {
    width: 146px;
  }
}
</style>
